<template>
  <!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
  <!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
  <div id="maproot" style="width: 100%; height: 100%;">
    <div id="allmap" style="float: left; width: 78%; height: 100%;"></div>
    <div id="mapcontrol" style="float: left; width: 22%; height: 100% padding: 20px;">
      <div class="mapcontrolgroup">
        <input class="btn btn-primary" style="width: 120px" type="button" id="getCenter" value="Get Center" @click="getCenter()"/>
      </div>
      <div class="mapcontrolgroup">
        <input :class="[getPointStatus?'btn-warning':'btn-primary', 'btn']" style="width: 120px" type="button" id="drawpoint" :value="[getPointStatus?'Draw Finish':'Draw Point']" @click="getPointLL()"/>
      </div>
      <div class="mapcontrolgroup" v-if="!hasLines">
        <input :class="[getLineStatus?'btn-warning':'btn-primary', 'btn']" style="width: 120px" type="button" id="drawline" :value="[getLineStatus?'Drawing Line':'Draw Line']" @click="drawLine()"/>
      </div>
      <div class="mapcontrolgroup" style="position: relative" v-else>
        <select class="form-control" name="editLines" id="editLines" v-model="selectline" style="position: absolute; left: 0; width: 100px">
          <option v-for="pl in editLines" :value="pl.id" :key="pl.id">
            line-{{ pl.id }}
          </option>
        </select>
        <input :class="[editLineStatus?'btn-warning':'btn-success', 'btn']" style="width: 120px" type="button" id="modifyLine" :disabled="!hasLines" :value="[editLineStatus?'Modify Finish':'Modify Line']" @click="modifyLine()"/>
      </div>
      <div class="mapcontrolgroup">
        <input class="btn btn-success" style="width: 120px" type="button" id="clearMap" value="Clear Map" @click="clearMap()"/>
      </div>
      <div class="mapcontrolgroup">
      </div>
      <div class="mapcontrolgroup" style="position: relative">
        <span class="bg-info" style="position: absolute; left: 0">{{currentline.line}}</span>
        <input class="btn btn-info" style="width: 120px" type="button" id="loadLine" :value="[loadLineStatus?'Save Line':'Load Line']" @click="loadLine()"/>
      </div>
    </div>
  </div>
</template>
<script>
import BMap from 'BMap'
import BMapLib from 'BMapLib'
import Request from '@/utils/request'
import * as API from '@/consts/api'
export default {
  name: 'Map',
  data () {
    return {
      map: {},
      getPointStatus: false,
      getLineStatus: false,
      editLineStatus: false,
      loadLineStatus: false,
      drawingManager: {}, // 绘图实例,
      // indoorManager: {},
      overlays: [], // 绘制的图层集合
      polyline: {}, // 当前编辑的折线
      linestyle: {},
      currentline: {
        id: 0,
        points: []
      }
    }
  },
  computed: {
    // 下拉数据
    editLines () {
      let edl = []
      for (let i = 0; i < this.overlays.length; i++) {
        edl.push({id: i + 1, line: this.overlays[i]})
      }
      return edl
    },
    // 是否有折线
    hasLines () {
      return this.editLines.length > 0
    },
    // 设置下拉选中
    selectline () {
      if (this.hasLines) {
        return 1
      } else {
        return -1
      }
    }
  },
  methods: {
    /**
     * 初始化地图组件
     */
    initMap () {
      this.map = new BMap.Map('allmap') // 创建Map实例
      this.map.centerAndZoom(new BMap.Point(120.431249, 36.154512), 13) // 初始化地图,设置中心点坐标和地图级别
      this.map.setCurrentCity('青岛') // 设置地图显示的城市 此项是必须设置的
      this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      // this.indoorManager = new BMapLib.IndoorManager(this.map) // 开启室内地图
    },
    /**
     * 初始化绘图组件
     */
    initDrawingManager () {
      this.linestyle = {
        strokeColor: 'red', // 边线颜色。
        fillColor: 'red', // 填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3, // 边线的宽度，以像素为单位。
        strokeOpacity: 0.8, // 边线透明度，取值范围0 - 1。
        fillOpacity: 0.6, // 填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' // 边线的样式，solid或dashed。
      }
      this.drawingManager = new BMapLib.DrawingManager(this.map, {
        isOpen: false, // 是否开启绘制模式
        enableDrawingTool: false, // 是否显示工具栏
        polylineOptions: this.linestyle // 线的样式
      })
    },
    /**
     * 绑定绘图回调事件
     */
    bindDrawingManager () {
      // 画线完成回调
      let that = this
      let polylinecomplete = function (e, overlay) {
        that.getLineStatus = false
        that.polyline = overlay
        that.overlays.push(overlay)
        // this.drawingManager.close() // 关闭绘画工具
      }
      this.drawingManager.addEventListener('polylinecomplete', polylinecomplete)
    },
    /**
     * 显示点的经纬度
     */
    showPointLL (e) {
      alert(e.point.lng + ',' + e.point.lat)
    },
    /**
     * 点击获取点的坐标
     */
    getPointLL () {
      if (this.getPointStatus) {
        this.getPointStatus = false
        this.map.removeEventListener('click', this.showPointLL)
        this.map.setDefaultCursor('url("http://api0.map.bdimg.com/images/openhand.cur") 8 8, default')
      } else {
        this.getPointStatus = true
        this.map.addEventListener('click', this.showPointLL)
        this.map.setDefaultCursor('crosshair')
      }
    },
    /**
     * 绘制折线
     */
    drawLine () {
      if (this.getLineStatus) {
        return
      }
      this.drawingManager.open()
      // eslint-disable-next-line
      this.drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE)
      this.getLineStatus = true
    },
    /**
     * 修改折线
     */
    modifyLine () {
      if (this.editLineStatus) {
        this.editLineStatus = false
        this.polyline.disableEditing()
      } else {
        this.editLineStatus = true
        this.polyline.enableEditing()
      }
    },
    /**
     * 清除绘制图层
     */
    clearMap () {
      for (var i = 0; i < this.overlays.length; i++) {
        this.map.removeOverlay(this.overlays[i])
      }
      this.overlays = []
      this.loadLineStatus = false
    },
    /**
     * 获取地图中心点坐标
     */
    getCenter () {
      alert(this.map.getCenter().lng + ',' + this.map.getCenter().lat + '/' + this.map.getZoom())
    },
    /**
     * 加载已有的路线
     */
    loadLine () {
      if (this.loadLineStatus) {
        // 已加载线路，功能切换为保存
        this.currentline.id = 99
        this.currentline.points = this.PointtoLL(this.polyline.getPath())
        Request.doPost(API.postline, null, this.currentline).then(response => {
          alert('保存成功！')
        })
      } else {
        this.loadLineStatus = true
        Request.doGet(API.getline, {id: 19}).then(response => {
          this.currentline = response
          this.showCurrentLine()
        })
      }
    },
    /**
     * 显示指定路线
     */
    showCurrentLine () {
      let points = this.LLtoPoint(this.currentline.points)
      let line = new BMap.Polyline(points, this.linestyle)
      this.polyline = line
      this.overlays.push(line)
      this.map.addOverlay(line)
    },
    /**
     * 根据坐标对生成点
     */
    LLtoPoint (lls) {
      let points = []
      for (let ll of lls) {
        let point = new BMap.Point(ll.lng, ll.lat)
        points.push(point)
      }
      return points
    },
    /**
     * 根据点生成坐标对
     */
    PointtoLL (points) {
      let lls = []
      for (let p of points) {
        let ll = {lng: p.lng, lat: p.lat}
        lls.push(ll)
      }
      return lls
    }
  },
  mounted () {
    this.initMap()
    this.initDrawingManager()
    this.bindDrawingManager()
  }
}
</script>

<!--Add"scoped" attribute to limit CSS to this component only -->
<style scoped>
#maproot{
  color:white;
}
.mapcontrolgroup{
  padding: 0 10px 10px 10px;
  margin: 0 10px 10px 10px;
  border-bottom: #0069d9 solid 1px;
  text-align: right
}
</style>
